<template>
  <div class="chat">
    <van-nav-bar :title="`通讯录(${friendList.length})`">
      <span
        slot="right"
        class="fs-20 icon-add-person-o iconfont"
        @click="
          $router.push({
            name: 'user-search'
          })
        "
      ></span>
    </van-nav-bar>
    <div>
      <van-cell-group>
        <van-cell
          title="新朋友"
          is-link
          @click="$router.push({ name: 'new-friend' })"
        />
        <van-cell
          title="讨论组"
          is-link
          @click="$router.push({ name: 'rooms' })"
        />
      </van-cell-group>
    </div>
    <div class="list">
      <div class="item" v-for="(item, index) in friendList" :key="index" @click="goItem(item)">
        <img class="item-avatar" :src="item.avatar || avatar" :alt="item.nickName" />
        <div class="item-main">
          <div class="item-name">{{ item.nickname }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data() {
    return {
      show: false
    }
  },
  computed: {
    chatList() {
      return this.$store.state.ch.chatList
    },
    userInfo() {
      return this.$store.state.ch.userInfo
    },
    friendList() {
      return this.$store.state.ch.friend
    }
  },
  methods: {
    goItem(item) {
      const partnerId = this.userInfo.id == item.eid ? item.uid : item.eid
      this.$router.push({
        name: 'chat-item',
        params: {
          partnerId: partnerId
        },
        query: {
          avatar: item.avatar,
          nickname: item.nickname
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.chat {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}
.view {
  background-color: #eee;
}

.item {
  display: flex;
  align-items: center;
  overflow: hidden;
  font-size: 12px;
  padding: 0 10px;
  background-color: #fff;
}

.item-main {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  height: 36px;
  padding: 6px 10px;
  padding-left: 0px;
  &::after {
    position: absolute;
    bottom: 0;
    content: ' ';
    display: block;
    height: 1px;
    width: 100%;
    background: #eee;
    transform: scaleY(0.5);
  }
}

.item-avatar {
  float: left;
  width: 36px;
  height: 36px;
  margin-right: 10px;
  border-radius: 4px;
}

.item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-msg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666;
}

.gray {
  color: #666;
  font-size: 12px;
}

.item-name {
  font-size: 14px;
  margin-bottom: 4px;
}

.fs-20 {
  font-size: 24px;
}

.icon-add-person-o {
  margin-right: -8px;
}
</style>
